<template>
  <div>
    <div v-if="isTable">
      <el-button type="primary" @click="addModal">主要按钮</el-button>
      <el-table
        :data="tableData"
        style="width: 80%"
        :border="true"
        :default-sort="{ prop: 'date', order: 'descending' }"
      >
        <el-table-column
          prop="date"
          label="日期"
          sortable
          width="180"
          :sort-orders="['ascending', 'descending', null]"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          :render-header="renderSpecNameHeader"
          width="180"
        >
        </el-table-column>
        <el-table-column prop="address" label="地址" :formatter="formatter">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-else><formModal /></div>
  </div>
</template>

<script>
import formModal from "./formModal.vue";
import SelectHeader from "./SelectHeader.vue";
export default {
  components: { formModal, SelectHeader },
  data() {
    return {
      isTable: true,
      tableData: [
        {
          date: "2016-05-02",
          name: "里小虎",
          address: "上海市普陀区金沙江路 1518 弄",
        },
        {
          date: "2016-05-04",
          name: "白小虎",
          address: "上海市普陀区金沙江路 1517 弄",
        },
        {
          date: "2016-05-01",
          name: "六小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
      ],
    };
  },
  methods: {
    addModal() {},
    formatter(row, column) {
      return row.address;
    },
    filterHandler(value, row, column) {
      console.log(value, row, column, "123");
      const property = column["property"];
      return row[property] === value;
    },
    handleClick() {},
    renderSpecNameHeader(createElement, { column, $index }) {
      let self = this;
      //该列的绑定数据
      // console.log(column.label);
      //列号
      // console.log($index);
      return createElement(
        "div",
        {
          style: "display:inline-flex;",
        },
        [
          createElement("div", {
            domProps: {
              innerHTML: column.label,
            },
          }),
          createElement(SelectHeader, {
            style: "cursor: pointer;",
            // 组件 prop
            props: {
              type: column.property,
              options: self.specIdOptions, //下拉框选项
              defaultValue: self.examinerFieldChname, //默认值
              defaultProps: {
                value: "examinerFieldName",
                label: "examinerFieldChname",
              },
            },
            // 事件监听器在 `on` 属性内，
            // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
            // 需要在处理函数中手动检查 keyCode。
            on: {
              selectChange: self.selectChange,
              // click: this.clickHandler
            },
            // 仅用于组件，用于监听原生事件，而不是组件内部使用
            // `vm.$emit` 触发的事件。
            nativeOn: {
              // click: this.nativeClickHandler
            },
          }),
        ]
      );
    },
    //选择框回调
    selectChange(data) {
      // console.log('回调', data)
      // 自定义筛选框返回数据进行过滤添加到tableData数组中
      let type = data["type"];
      let value = data["value"];
      if (value !== "" && type !== "") {
        this.tableData = this.tableData.filter((item) =>
          item[type]
            .toString()
            .toLowerCase()
            .includes(value.toString().toLowerCase())
        );
      } else {
        this.getDeptListData(); //重新请求数据源
      }
    },
    clearSearch() {
      this.search = "";
    },
  },
};
</script>
